<template>
  <Panel
    class="equipment-wrapper"
    title="设备监测"
    direction="row"
    v-bind="config"
    :main-style="{ 'align-items': 'center', 'justify-content': 'space-evenly' }"
  >
    <!-- 情报版 -->
    <div class="equipment-item qbb">
      <div class="percentage number qbb-color">{{ (state.qbbOnlineRate || 0).toFixed(2) || 0 }}%</div>
      <div class="on-line">
        <span class="on-line-percentage qbb-color"
          >在线<span class="count"> {{ state.qbbOnline || 0 }}</span>
        </span>
        <span>/总数</span>
        <span>{{ state.qbbTotal || 0 }}</span>
      </div>
      <div class="tips">情报板在线率</div>
      <div class="bottom"></div>
    </div>

    <!-- 摄像机 -->
    <div class="equipment-item sxj">
      <div class="percentage number sxj-color">{{ (state.cameraPersistenceRate || 0).toFixed(2) || 0 }}%</div>
      <div class="on-line">
        <span class="on-line-percentage sxj-color"
          >在线<span class="count">{{ state.cameraOnline || 0 }}</span>
        </span>
        <span>/总数</span>
        <span>{{ state.cameraTotal || 0 }}</span>
      </div>
      <div class="tips">摄像机连通率</div>
      <div class="bottom"></div>
    </div>
  </Panel>
</template>
<script>
export default {
  name: 'Equipment'
}
</script>
<script setup>
/**
 * 设备监测
 * @author 邓清波
 * @date 2022/10/25
 */
import Panel from '../../components/panel/index.vue'
import { ref, computed, getCurrentInstance, onUnmounted } from 'vue'
import monitorApi from '../../api/monitor'
import useDefaultEmits from '@/hooks/useDefaultEmits'
import useWatchStore from '@/hooks/useWatchStore'
import store from '@/store'
import { useRoute } from 'vue-router'
import { useInterval } from '@vueuse/core'
import { get } from '@/utils'
import { config } from 'process'

const INTERVAL_FETCH_UNIT = 300 // 定时刷新 单位秒

const route = useRoute()
const state = ref({})
const orgId = computed(() => (store.state.user.userInfo.orgInfos ? store.state.user.userInfo.orgInfos[0].orgId : ''))
const paramsState = ref({}) // 获取列表所需参数 areaCode cityCode
const { proxy } = getCurrentInstance()

// https://vueuse.org/shared/useInterval/
const { counter, pause, resume } = useInterval(1000, {
  controls: true,
  callback(count) {
    // 通知设备列表刷新
    if (count > 0 && count % INTERVAL_FETCH_UNIT == 0) {
      proxy.$bus.emit('equipmentRefresh')
      getData(paramsState.value)
    }
  }
})

useDefaultEmits()
useWatchStore(getData)
onUnmounted(() => pause()) // 销毁时终止定时

/**
 * 获取设备监测统计数据
 * **/
function getData(argParams) {
  paramsState.value = argParams
  // 交建局暂时展示
  if (route.params.pageId == 'jjj') {
    state.value = {
      qbbTotal: 1414,
      qbbOnline: 1244,
      qbbOffline: 0,
      qbbOnlineRate: 84.07,
      qbbException: 1,
      cameraTotal: 5484,
      cameraOnline: 5136,
      cameraOffline: 0,
      cameraPersistenceRate: 93.65,
      cameraException: 2
    }
  } else {
    const params = {
      roadType: argParams.roadType,
      province: '32',
      city: argParams.isProvince ? null : argParams.areaCode,
      orgId: orgId.value,
      companyType: get(store.state, 'user.bussinessType')
    }
    monitorApi.getEquipmentStatistic(params).then(res => {
      state.value = res.data || {}
    })
  }
}
</script>

<style scoped lang="less">
/deep/ .mz-panel-content-main {
  justify-content: center !important;
}

.qbb-color {
  color: #0bb6a9;
  font-size: 15px;
}

.sxj-color {
  color: #118ae8;
  font-size: 15px;
}

.equipment-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  text-align: center;
  cursor: pointer;

  .equipment-item {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .percentage {
    font-size: 30px;
    line-height: 24px;
    margin-top: 19px;
  }

  .tips {
    height: 12px;
    font-size: 12px;
    color: #666666;
  }

  .on-line {
    font-size: 15px;
    line-height: 30px;
    height: 30px;
    word-break: break-all;

    .count {
      font-size: 16px;
    }
  }

  .bottom {
    width: 132px;
    height: 42px;
  }

  .qbb {
    .bottom {
      background: url('../../assets/images/monitor/equipment-qbb-lampstand.png');
      background-size: 100%;
    }
  }

  .sxj {
    .bottom {
      background: url('../../assets/images/monitor/equipment-video-lampstand.png') no-repeat;
      background-size: 100%;
    }
  }
}
</style>
